<%-- 
    Document   : createTrip
    Created on : Mar 31, 2013, 5:30:31 PM
    Author     : daniellesabol
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Adventure - NCT Software - Create Trip</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/createTripCSS.css">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?AIzaSyASxtqXuj-Yf-yOR4sD-uQcROa87fDefCc&sensor=true">
        </script>
        <!-- JQUERY CALENDAR CODE src = http://jqueryui.com/datepicker/-->
        <script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
        <script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
        <link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">
        <!-- END JQUERY CALENDAR src = http://jqueryui.com/datepicker/  -->
    </head>
    <body>
        <div id="topBar">
            <div id="leftDiv"><img src="images/adventure_text.png"/></div>
            <form action="#" method="POST" id="loginForm">
                <div id="farRightButton"><img id='TripCreationButton' src='images/createTripButton.png'/></div>
                <div id="rightDivTop"><img id='AccountButton' src='images/AccountButton.png'/></div>
                <div id="rightDivBtm"><img id='SignOutButton' src='images/SignOutButton.png'/></div>   
            </form>
        </div>    
        <div id="createPanel">
            <!--<div id="createForm">-->
            <br/>
            <label for="tripName" class="createTripLabel">Name Your Trip*: </label>&nbsp;
            <input id="tripName" type="text" name="tripName" class="createTripInput"/>
            &nbsp;
            <img src="images/CreateButton.png" id="CreateButton" class="addButtons" /> <br/>

            <label for ="underName" class ="underCreateLabel">Give your adventure a name</label> <br/>
            <br/> 
            <!--span id="firstLine"-->
            <label for="start" class="createTripLabel">Start*: </label>
            <input id="tripStart" type="text" name="tripStart" class="createTripInput"/>&nbsp;&nbsp;
            <label for="startDate" class="createTripLabel">Date*: </label> 
            <input id="tripStartDate" type="text" name="tripStartDate" class="createTripInput"/> 
            <!--/span-->
            <img src = "images/AddButton.png" id="addStart" alt="add" class ="addButtons"/><br/>

            <label for ="underStart" class ="underCreateLabel"> Choose your starting destination and date</label> <br/>
            <br/> 
            <label for="end" class="createTripLabel">End*: </label>&nbsp;
            <input id="tripEnd" type="text" name="tripEnd" class="createTripInput"/>&nbsp;&nbsp;
            <label for="endDate" class="createTripLabel">Date*: </label>
            <input id="tripEndDate" type="text" name="tripEndDate" class="createTripInput" class="dateClass"/> 
            <!--input name ="addEnd" id="addEnd" type ="button" value="Add" onclick ="addEnd()"/-->

            <img src = "images/AddButton.png" id="addEnd" alt="add" class ="addButtons"/><br/>
            <!--<div id="addButton1"><img src = "images/AddButton.png" id="addButton1"/></div>-->

            <label for ="underEnd" class ="underCreateLabel"> Choose your ending destination and date</label> <br/>
            <br/> 
            <label for="addWaypoints" class="createTripLabel">Waypoints: </label>
            <input id="tripWaypoint" type="text" name="tripWaypoint" class="createTripInput"/>
            <label for="waypointDate" class="createTripLabel">Date: </label>
            <input id="tripWaypointDate" type="text" name="tripWaypointDate" class="createTripInput" class="dateClass"/>
            <!--input name ="addWayPt"type ="button" value="Add" onclick ="addWayPt()"/><br/-->


            <img src = "images/AddButton.png" id="addWayPt" class ="addButtons"/><br/>

            <label for ="underWaypoint" class ="underCreateLabel"> Choose stops and dates along the way</label> <br/>
            <br/> 
            <!-- insert google -->
            <div id="map"></div>

            <!--</div>-->
            <!-- Right Side -->

        </div>
        <div id="rightPanel">
            <span id="startSpan"></span><br/>
            <div id="waypointDiv"></div>
            <span id="endSpan"></span>

        </div>
        <script src="javascript/createTripJavascript.js"></script>
        <script src="javascript/ButtonHoverJavascript.js"></script>
    </body>
</html>
